<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>mmkit: Samples &raquo; Base</title>
	<meta name="description" content="mmkit css library font sample page" />
	<meta name="keywords" content="mmkit fonts" />
	<meta name="robots" content="all" />
	<meta http-equiv="imagetoolbar" content="no" />


	<!-- Framework CSS -->
	<link rel="stylesheet" href="../mmkit/base/screen.css" type="text/css" media="all" />
	<link rel="stylesheet" href="../mmkit/base/print.css" type="text/css" media="print" />
	<!--[if IE]><link rel="stylesheet" href="../mmkit/base/ie.css" type="text/css" media="all" /><![endif]-->


	<style type="text/css">
		body {
			text-align: center;
			padding: 0px 10px;
			background: url(grid.png);
		}
		
		.container {
			width: 960px;
			margin: 0px auto;
			text-align: left;
		}

	</style>
</head>
<body>
	<p id="skip-links"><a href="#content" title="Skip To Content">Skip To Content</a></p>
	<div id="wrapper" class="container">

		<!-- Site header -->
		<div id="header">
			<p id="logo"><span>Sitename</span></p>
		</div>

		<!-- Main nav -->
		<div id="main-navigation">
			<ul>
				<li class="selected"><a href="/base/" title="">Home</a></li>
				<li><a href="/base/" title="" class="">About</a></li>
				<li><a href="/base/" title="" class="">Main</a></li>
				<li><a href="/base/" title="" class="">Navigation</a></li>
				<li><a href="/base/" title="" class="">System</a></li>
			</ul>
		</div>

		<!-- Main content -->
		<div id="main">

			<!-- Main content -->
			<div id="content">

				<p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.</p>

				<h1>Level 1 Heading</h1>
				<p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.</p>
				<p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.</p>

				<h2>Level 2 Heading</h2>
				<p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.</p>
				
				<h3>Level 3 Heading</h3>
				<p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.</p>
				
				<h4>Level 4 Heading</h4>
				<p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.</p>
				
				<h5>Level 5 Heading</h5>
				<p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.</p>
				
				<h6>Level 6 Heading</h6>
				<p>Sed scelerisque sagittis lorem

				<p>Lorem <strong>bold ipsum dolor nato sit amet</strong>, <em>emphasis consectetur adipisicing elit</em>, <a href="http://www.example.com">link</a>, <cite>Citation</cite>, <code>Inline Code</code> , <acronym title="Cascading Style Sheets">CSS</acronym> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Horizontal rule comes next:</p>

				<p>Ut tincidunt ultrices elit. Nulla eros orci, posuere sed, feugiat quis, nonummy ut, metus. Phasellus elit. Mauris quis lectus. Nulla commodo sem vitae magna. Nulla facilisi. Suspendisse porttitor hendrerit turpis. Cras ut est at urna luctus dignissim. Duis tristique elit aliquam est.</p>

				<h1>Page name Lorem <strong>bold ipsum dolor nato sit amet</strong></h1>

				<p>Fusce lectus. Nunc faucibus, lectus at interdum tempus, eros quam faucibus lectus, imperdiet molestie quam dui ut lorem. Aenean pharetra, pede quis ullamcorper sodales, mauris purus adipiscing lacus, ac volutpat elit nisl in nisi. Aliquam erat volutpat. Nullam convallis faucibus turpis.</p>

				<p>Lorem <strong>bold ipsum dolor nato sit amet</strong>, <em>emphasis consectetur adipisicing elit</em>, <a href="http://www.example.com">link</a>, <cite>Citation</cite>, <code>Inline Code</code> , <acronym title="Cascading Style Sheets">CSS</acronym> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Horizontal rule comes next:</p>

				<h1>Page name Lorem <strong>bold ipsum dolor nato sit amet</strong>, <em>emphasis consectetur adipisicing elit</em>, <a href="http://www.example.com">link</a>, <cite>Citation</cite>, <code>Inline Code</code> , <acronym title="Cascading Style Sheets">CSS</acronym> sed do eiusmod.</h1>

				<p>Ut tincidunt ultrices elit. Nulla eros orci, posuere sed, feugiat quis, nonummy ut, metus. Phasellus elit. Mauris quis lectus. Nulla commodo sem vitae magna. Nulla facilisi. Suspendisse porttitor hendrerit turpis. Cras ut est at urna luctus dignissim. Duis tristique elit aliquam est.</p>

				<p>Fusce lectus. Nunc faucibus, lectus at interdum tempus, eros quam faucibus lectus, imperdiet molestie quam dui ut lorem. Aenean pharetra, pede quis ullamcorper sodales, mauris purus adipiscing lacus, ac volutpat elit nisl in nisi. Aliquam erat volutpat. Nullam convallis faucibus turpis.</p>

				<h2>Lists</h2>

				<h3>Unordered List</h3>

				<ul>
					<li>Lorem ipsum dolor nato sit amet</li>
					<li>Duis aute irure dolor in reprehenderit in voluptate
						<ul>
							<li>Cras tristique metus a magna.</li>
							<li>Nunc mattis purus vel neque.</li>
							<li>Quisque non magna in lectus nonummy convallis.</li>
						</ul>
					</li>
					<li>ivamus id tellus. Nam orci mauris, rhoncus et, pharetra eget, rutrum et, nibh. Donec nulla. Etiam a lectus at augue tristique ullamcorper. Morbi viverra purus in felis. Aliquam volutpat. Sed tortor pede, suscipit non, malesuada id, elementum quis, lacus.</li>
					<li>Morbi pharetra. Aenean ipsum neque, volutpat nec, feugiat sit amet, feugiat nec, magna.</li>
					<li>Proin ultricies libero at eros. Integer pede libero, sodales et, aliquam a, rutrum sed.</li>
				</ul>

				<h3>Ordered List</h3>

				<ol>
					<li>Aenean porta sem ut erat.	</li>
					<li>Curabitur mollis malesuada turpis.
						<ol>
							<li>Ut imperdiet nisi pharetra odio.</li>
							<li>Nam a enim id libero convallis bibendum.</li>
							<li>Aliquam ac tortor sed magna lobortis iaculis.</li>
							<li>Nullam convallis erat non ligula.</li>
							<li>Vestibulum rutrum nibh nec sem.</li>
						</ol>
					</li>
					<li>Quisque accumsan hendrerit nunc.	</li>
					<li>Cras euismod vehicula ipsum.	</li>
					<li>Sed eu massa a lorem tempor bibendum.	</li>
					<li>Vivamus pulvinar hendrerit nunc.	</li>
					<li>Pellentesque pulvinar purus non tortor.	</li>
					<li>Morbi vulputate convallis urna.	</li>
				</ol>

				<h3>Unordered Link List</h3>

				<ul>
					<li><a href="/base/">Link 1</a></li>
					<li><a href="/base/">Link 2</a></li>
					<li><a href="/base/">Link 3</a></li>
					<li><a href="/base/">Link 4</a></li>
				</ul>

				<h2>Blockquote</h2>

				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

				<blockquote>
					<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				</blockquote>

				<p>Aliquam vehicula leo sit amet ipsum. Vestibulum nulla. Donec tincidunt, ligula eget vulputate vulputate, est ipsum lacinia ligula, non eleifend justo massa et justo. Proin felis massa, ornare at, commodo non, tincidunt condimentum, odio. Suspendisse in lorem. Cras dapibus sodales erat.</p>

				<h2>Code Block (Pre+Code)</h2>

				<pre><code>em, dfn {font-style:italic;}
dfn {font-weight:bold;}
sup, sub {line-height:0;}
abbr, acronym {border-bottom:1px dotted #666;}</code></pre>

				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

				<h2>Table</h2>

				<table summary="An example table">
					<caption>Caption</caption>
					<tr>
						<th>name</th><th>age</th><th>gender</th>
					</tr>
					<tr>
						<td>Archie</td><td class="numeric">24</td><td>M</td>
					</tr>
					<tr>
						<td>Brian</td><td class="numeric">29</td><td>M</td>
					</tr>
					<tr>
						<td>Cathie</td><td class="numeric">45</td><td>F</td>
					</tr>
				</table>

				<h2>Form</h2>

				<!-- Sample form -->
				<form action="/base/" method="post" enctype="multipart/form-data" accept-charset="utf-8">
					<fieldset>
						<legend>Sample form</legend>

						<div class="form-field">
							<label for="field_name">Name
								<abbr class="required" title="Required">*</abbr>
							</label>
							<input class="text" type="text" id="field_name" name="name" value="" />
							<p class="hint">This is a tip</p>
						</div>
						
						<div class="form-field">
							<label for="field_content">Content</label>
							<textarea class="text" id="field_content" name="content" rows=""></textarea>
						</div>

						<div class="form-radios">

							<label>Content</label>

							<div>
								<input type="radio" class="radio" id="field_status_1" name="status[]" value="1" checked="checked" />
								<label for="field_status_1">Published</label>
							</div>

							<div>
								<input type="radio" class="radio" id="field_status_2" name="status[]" value="0" />
								<label for="field_status_2">Private</label>
							</div>

						</div>

						<div class="form-buttons">
							<input type="submit" name="submit" value="Submit" />
						</div>
					</fieldset>
				</form>			

				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				
				<!-- Page excerpt -->
				<div class="hentry" id="post-1">
					<h2 class="entry-title"><a href="/base/pagename/" rel="bookmark" title="">Page Excerpt</a></h2>

					<div class="entry-content body">
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
					</div>

					<div class="detail">
						<!--
						<ul class="tags">
							<li><a href="/base/tag/tag1" rel="tag">tag1</a></li>
							<li><a href="/base/tag/tag2" rel="tag">tag2</a></li>
							<li><a href="/base/tag/tag3" rel="tag">tag3</a></li>
						</ul>
						-->
						<p class="entry-info">
							posted by <span class="author vcard"><strong class="fn">Author Name</strong></span> on
							<abbr class="published" title="2010-01-01t00:00:00-00:00">1st Jan 2010 at 0:00 am</abbr>
						</p>
					</div>

				</div>

				<!-- Page excerpt -->
				<div class="hentry" id="post-2">

					<!-- Image -->
					<div class="entry-content image">
						<a href="/base/pagename/" rel="bookmark" title=""><img src="/base/img/samples/avatar128.png" alt="" /></a>
					</div>

					<h2 class="entry-title"><a href="/base/pagename/" rel="bookmark" title="">Page Excerpt with Image</a></h2>

					<div class="entry-content body">
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
					</div>

					<div class="detail">
						<!--
						<ul class="tags">
							<li><a href="/base/tag/tag1" rel="tag">tag1</a></li>
							<li><a href="/base/tag/tag2" rel="tag">tag2</a></li>
							<li><a href="/base/tag/tag3" rel="tag">tag3</a></li>
						</ul>
						-->
						<p class="entry-info">
							posted by <span class="author vcard"><strong class="fn">Author Name</strong></span> on
							<abbr class="published" title="2010-01-01t00:00:00-00:00">1st Jan 2010 at 0:00 am</abbr>
						</p>
					</div>

				</div>
				
				<!-- Pagination -->
				<ol class="pages">
					<li class="previous-disabled">&lsaquo; Previous</li>
					<li class="selected">1</li>
					<li><a href="?page=2">2</a></li>
					<li><a href="?page=3">3</a></li>
					
					<li class="more">&hellip;</li>

					<li><a href="?page=5">5</a></li>
					<li><a href="?page=6">6</a></li>
					<li><a href="?page=7">7</a></li>
					<li class="next"><a href="?page=2">Next &rsaquo;</a></li>
				</ol>
				
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				
				<!-- Comments -->
				
				<h2>Comments on &lsquo;Page Name&rsquo;</h2>

				<div class="comment">

					<div class="body">
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
					</div>

					<p class="detail vcard">
					 Posted by 
					 <img class="photo" src="/base/img/samples/avatar16.png" alt="A. Person's Avatar" />
					 <a href="http://www.example.com" rel="external" class="fn url">A. Person</a>
					 on <abbr class="posted-on" title="YYYY-MM-DDTHH:MM:SS+ZZ:ZZ">1st Jan 2010</abbr>
					</p>

				</div>

				<div class="comment">

					<div class="body">
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
					</div>

					<p class="detail vcard">
						Posted by 
						<img class="photo" src="/base/img/samples/avatar16.png" alt="A. Person's Avatar" />
						<a href="http://www.example.com" rel="external" class="fn url">A. Person</a>
						on <abbr class="posted-on" title="YYYY-MM-DDTHH:MM:SS+ZZ:ZZ">1st Jan 2010</abbr>
					</p>

				</div>

				<p>Sed scelerisque sagittis lorem <span class="alt">&amp;</span> phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.</p>

				<h1><span class="dquo">&#8220;</span>Level 1 heading&#8221;</h1>
				<h2>Level 02 Heading</h2>
				<p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.</p>
				<p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.</p>

				<h2>Level 02 Heading</h2>
				<p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.</p>
				<h3>Level 03 Heading</h3>

				<p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.</p>
				<h4>Level 04 Heading</h4>
				<p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.</p>
				<h5>Level 05 Heading</h5>

				<p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.</p>
				<h6>Level 06 Heading</h6>
				<p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.</p>
				<blockquote>
					<p>Paragraph inside Blockquote: Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Sed scelerisque sagittis lorem.</p>
					<p>Paragraph inside Blockquote: Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Sed scelerisque sagittis lorem.</p>
				</blockquote>

				<address>Address: Example address 224, Sweden</address>
				<pre><strong>Preformated:</strong>Testing one row
				     and another</pre>
				<p>
				I am <a href="?abc123">the a tag</a> example<br />

				I am <abbr title="test">the abbr tag</abbr> example<br />

				I am <acronym>the acronym tag</acronym> example<br />
				I am <b>the b tag</b> example<br />
				I am <big>the big tag</big> example<br />

				I am <cite>the cite tag</cite> example<br />

				I am <code>the code tag</code> example<br />
				I am <del>the del tag</del> example<br />
				I am <dfn>the dfn tag</dfn> example<br />

				I am <em>the em tag</em> example<br />

				I am <font face="verdana">the font tag</font> example<br />
				I am <i>the i tag</i> example<br />
				I am <ins>the ins tag</ins> example<br />

				I am <kbd>the kbd tag</kbd> example<br />

				I am <q>the q tag <q>inside</q> a q tag</q> example<br />
				I am <s>the s tag</s> example<br />
				I am <samp>the samp tag</samp> example<br />

				I am <small>the small tag</small> example<br />
				I am <span>the span tag</span> example<br />
				I am <strike>the strike tag</strike> example<br />
				I am <strong>the strong tag</strong> example<br />

				I am <sub>the sub tag</sub> example<br />
				I am <sup>the sup tag</sup> example<br />
				I am <tt>the tt tag</tt> example<br />
				I am <var>the var tag</var> example<br />

				I am <u>the u tag</u> example
				</p>
				<hr>
				<ul>
					<li>Unordered list 01</li>
					<li>Unordered list 02</li>
					<li>Unordered list 03
						<ul>

							<li>Unordered list inside list level 2</li>

							<li>Unordered list inside list level 2
								<ul>
									<li>Unordered list inside list level 3</li>
									<li>Unordered list inside list level 3</li>
								</ul>
							</li>

						</ul>
					</li>

				</ul>
				<ol>
					<li>Ordered list 01</li>
					<li>Ordered list 02</li>
					<li>Ordered list 03
						<ol>
							<li>Ordered list inside list level 2</li>

							<li>Ordered list inside list level 2
								<ol>

									<li>Ordered list inside list level 3</li>
									<li>Ordered list inside list level 3</li>
								</ol>
							</li>
						</ol>
					</li>
					<li>Ordered list</li>
					<li>Ordered list</li>
					<li>Ordered list</li>
					<li>Ordered list</li>
					<li>Ordered list</li>
					<li>Ordered list</li>
					<li>Ordered list</li>
					<li>Ordered list</li>
					<li>Ordered list</li>
					<li>Ordered list</li>
					<li>Ordered list</li>
					<li>Ordered list</li>
					<li>Ordered list</li>
					<li>Ordered list</li>
					<li>Ordered list</li>
					<li>Ordered list</li>
					<li>Ordered list</li>
					<li>Ordered list</li>
					<li>Ordered list</li>
					<li>Ordered list</li>

				</ol>
				<dl>
					<dt>Description list title 01</dt>

					<dd>Description list description 01</dd>
					<dt>Description list title 02</dt>
					<dd>Description list description 02</dd>
					<dd>Description list description 03</dd>

				</dl>
				<table>
					<caption>Table Caption</caption>

					<thead>
						<tr>
							<th>Table head th</th>
							<td>Table head td</td>
						</tr>

					</thead>
					<tfoot>
						<tr>

							<th>Table foot th</th>
							<td>Table foot td</td>
						</tr>
					</tfoot>

					<tbody>
						<tr>
							<th>Table body th</th>

							<td>Table body td</td>
						</tr>
						<tr>
							<td>Table body td</td>

							<td>Table body td</td>
						</tr>
					</tbody>

				</table>
				<form action="#">
				<fieldset>
				<legend>Form legend</legend>
				<div><label for="f1">Text input:</label> <input type="text" id="f1" value="input text"></div>
				<div><label for="f2">Radio input:</label> <input type="radio" id="f2" name="f2"></div>

				<div><label for="f3">Checkbox input:</label> <input type="checkbox"  id="f3"></div>
				<div><label for="f4">Select field:</label> <select id="f4"><option>Option 01</option><option>Option 02</option></select></div>

				<div><label for="f5">Textarea:</label><br><textarea id="f5" cols="30" rows="5" >Textarea text</textarea></div>
				<div><label for="f6">Button:</label> <input type="button" id="f6" value="button text"></div>
				</fieldset>
				</form>
				<p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.</p>
			</div>

			<!-- Extra content -->
			<div id="extras">
				<h2>Sidebar Menu One</h2>
				<h3>This is a Menu</h3>
				<ul>
					<li><a href="/base/" title="">When To Stop</a></li>
					<li><a href="/base/" title="">Menu Option</a></li>
					<li><a href="/base/" title="">What Can I Do</a></li>
					<li><a href="/base/" title="">There is More To Do</a></li>
					<li><a href="/base/" title="">Much More</a></li>
				</ul>

				<h3>Sidebar Menu Two</h3>

				<ul>
					<li><a href="/base/" title="">Menu Item 1</a></li>
					<li class="has-children"><a href="/base/" title="">Menu Item 2</a>
						<ul>
							<li><a href="/base/" title="">Sub-menu Item 1</a></li>
							<li class="selected"><a href="/base/" title="">Sub-menu Item 2</a></li>
							<li><a href="/base/" title="">Sub-menu Item 3</a></li>
						</ul>
					</li>
					<li><a href="/base/" title="">Menu Item 3</a></li>
					<li><a href="/base/" title="">Menu Item 4</a></li>
				</ul>

				<!-- Sidebar form -->
				<form action="/base/" method="post" accept-charset="utf-8">
					<div class="form-field">
						<label for="field_signup">Sign Up</label>
						<input type="text" id="field_signup" name="signup" value="" />
					</div>
					<div class="form-buttons">
						<input type="submit" name="submit" value="Submit" />
					</div>
				</form>

				<h3>Tags</h3>

				<ul class="tagcloud">
					<li class="popular"><a href="/base/tag/ajax" rel="tag">ajax</a><span>9</span></li>
					<li class="v-popular"><a href="/base/tag/art" rel="tag">art</a><span>11</span></li>
					<li class="popular"><a href="/base/tag/audio" rel="tag">audio</a><span>6</span></li>
					<li class="vv-popular"><a href="/base/tag/blog" rel="tag">blog</a><span>15</span></li>
					<li class="vv-popular"><a href="/base/tag/blogs" rel="tag">blogs</a><span>14</span></li>
					<li class="v-popular"><a href="/base/tag/books" rel="tag">books</a><span>12</span></li>
					<li class="popular"><a href="/base/tag/business" rel="tag">business</a><span>9</span></li>
					<li class="current vvvv-popular"><a href="/base/tag/css" rel="tag">css</a><span>18</span></li>
					<li class="current vvvv-popular"><a href="/base/tag/design" rel="tag">design</a><span>21</span></li>
					<li class="current v-popular"><a href="/base/tag/development" rel="tag">development</a><span>12</span></li>
					<li class="v-popular"><a href="/base/tag/education" rel="tag">education</a><span>12</span></li>
					<li class="popular"><a href="/base/tag/flash" rel="tag">flash</a><span>10</span></li>
					<li class="v-popular"><a href="/base/tag/food" rel="tag">food</a><span>13</span></li>
					<li class="current popular"><a href="/base/tag/free" rel="tag">free</a><span>9</span></li>
					<li class="vv-popular"><a href="/base/tag/fun" rel="tag">fun</a><span>14</span></li>
					<li class="popular"><a href="/base/tag/games" rel="tag">games</a><span>15</span></li>
					<li class="popular"><a href="/base/tag/google" rel="tag">google</a><span>8</span></li>
					<li class="vvv-popular"><a href="/base/tag/howto" rel="tag">howto</a><span>17</span></li>
					<li class="vvv-popular"><a href="/base/tag/imported" rel="tag">imported</a><span>16</span></li>
					<li class="local vv-popular"><a href="/base/tag/inspiration" rel="tag">inspiration</a><span>15</span></li>
					<li class="current popular"><a href="/base/tag/internet" rel="tag">internet</a><span>8</span></li>
					<li class="vv-popular"><a href="/base/tag/java" rel="tag">java</a><span>14</span></li>
					<li class="local vv-popular"><a href="/base/tag/javascript" rel="tag">javascript</a><span>14</span></li>
					<li class="local v-popular"><a href="/base/tag/library" rel="tag">library</a><span>13</span></li>
					<li class="popular"><a href="/base/tag/linux" rel="tag">linux</a><span>9</span></li>
					<li class="vvv-popular"><a href="/base/tag/mac" rel="tag">mac</a><span>16</span></li>
					<li class="popular"><a href="/base/tag/mobile" rel="tag">mobile</a><span>10</span></li>
					<li class="vv-popular"><a href="/base/tag/music" rel="tag">music</a><span>14</span></li>
					<li class="vvv-popular"><a href="/base/tag/news" rel="tag">news</a><span>16</span></li>
					<li class="local v-popular"><a href="/base/tag/opensource" rel="tag">opensource</a><span>11</span></li>
					<li class="v-popular"><a href="/base/tag/photography" rel="tag">photography</a><span>13</span></li>
					<li class="v-popular"><a href="/base/tag/politics" rel="tag">politics</a><span>12</span></li>
					<li class="vvv-popular"><a href="/base/tag/programming" rel="tag">programming</a><span>16</span></li>
					<li class="current v-popular"><a href="/base/tag/reference" rel="tag">reference</a><span>13</span></li>
					<li class="local vvv-popular"><a href="/base/tag/research" rel="tag">research</a><span>17</span></li>
					<li class="local vvv-popular"><a href="/base/tag/resources" rel="tag">resources</a><span>16</span></li>
					<li class="vvv-popular"><a href="/base/tag/science" rel="tag">science</a><span>17</span></li>
					<li class="v-popular"><a href="/base/tag/security" rel="tag">security</a><span>12</span></li>
					<li class="v-popular"><a href="/base/tag/shopping" rel="tag">shopping</a><span>14</span></li>
					<li class="v-popular"><a href="/base/tag/software" rel="tag">software</a><span>13</span></li>
					<li class="current popular"><a href="/base/tag/technology" rel="tag">technology</a><span>7</span></li>
					<li class="local v-popular"><a href="/base/tag/tips" rel="tag">tips</a><span>11</span></li>
					<li class="current vvv-popular"><a href="/base/tag/tools" rel="tag">tools</a><span>17</span></li>
					<li class="v-popular"><a href="/base/tag/toread" rel="tag">toread</a><span>13</span></li>
					<li class="local v-popular"><a href="/base/tag/tutorial" rel="tag">tutorial</a><span>12</span></li>
					<li class="v-popular"><a href="/base/tag/video" rel="tag">video</a><span>13</span></li>
					<li class="current vv-popular"><a href="/base/tag/web" rel="tag">web</a><span>15</span></li>
					<li class="local v-popular"><a href="/base/tag/web2.0" rel="tag">web2.0</a><span>12</span></li>
					<li class="current popular"><a href="/base/tag/webdesign" rel="tag">webdesign</a><span>10</span></li>
					<li class="vvv-popular"><a href="/base/tag/windows" rel="tag">windows</a><span>19</span></li>
				</ul>

			<!-- End of extras -->
			</div>

		<!-- End of main -->
		</div>

		<!-- Footer -->
		<div id="footer">
			<ul>
				<li><a href="/base/" title="">Home</a></li>
				<li><a href="/base/" title="">About</a></li>
				<li><a href="/base/" title="">Main</a></li>
				<li><a href="/base/" title="">Navigation</a></li>
				<li><a href="/base/" title="">System</a></li>
			</ul>
			<p><a href="#wrapper">Back to top</a></p>
		</div>

	</div>
</body>
</html>